import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import * as mojs from 'mojs';

@Component({
	selector: 'page-level',
	templateUrl: 'level.html'
})
export class LevelPage {
	progress: number;
	levelInfo: any;
	nextExp: number = 100;

	constructor(private params: NavParams) {}

	ionViewWillEnter() {
		this.levelInfo = {
			level: this.params.get('level'),
			exp: this.params.get('exp')
		}
		this.progress = this.levelInfo.exp;
		const shapeBase = new mojs.Shape({
			parent: document.querySelector('#level'),
			shape: 'circle',
			radius: 50,
			angle: -90,
			fill: 'transparent',
			stroke: '#efefef',
			strokeWidth: 10,
			isShowStart: true,
		});

		const shape = new mojs.Shape({
			parent: document.querySelector('#level'),
			shape: 'circle',
			radius: 50,
			angle: -90,
			delay: 500,
			fill: 'transparent',
			stroke: '#F64040',
			strokeWidth: 8,
			strokeDasharray: '100%',
			strokeDashoffset: { '100%': `${100 - this.progress}%` },
			isShowStart: true,
		}).play();

		console.log(shapeBase);
		console.log(shape);
	}
}
